<!-- 天气预报组件 -->

<template>
    <div class="forecast">
        <div class="forecastText">
            <div v-for="(item, index) in foreWeather" :key="item.date">
                <span>{{ getDisplayDayLabel(item, index) }}</span>
                <span>{{ item.date.substr(5, 5) }}</span>
                <span>{{ item.dayweather }}</span>
                <span>风力 {{ item.nightpower }}级</span>
            </div>
        </div>
        <div class="chart">
            <v-chart :option="option"></v-chart>
        </div>
    </div>
</template>
<script setup>
import { getIp, getForecastWeather } from '../api/weather.js'
import { ref, onMounted, watchEffect } from 'vue'
const foreWeather = ref([])   //预报天气的数组
const data1 = ref([])
const data2 = ref([])

// 接收查询页面传递过来的adcode参数，然后渲染不同的图标
const props = defineProps({
    adcode: {
        type: String,
        // required: true
    }
})

// 使用 watchEffect 钩子来获取数据
watchEffect(async () => {
    let currentAdcode = props.adcode; // 优先使用传递的 adcode prop

    // 如果没有传递 adcode prop，则通过 IP 获取 adcode
    if (!currentAdcode) {
        const ipRes = await getIp(); // 获取当前ip信息
        currentAdcode = ipRes.adcode; // 获取 IP 对应的 adcode
    }


    if (currentAdcode) {
        const data = await getForecastWeather(currentAdcode)
        foreWeather.value = data.forecasts[0].casts
    }
    // console.log(currentAdcode)




    // 绘制折线图用到的数据
    data1.value = foreWeather.value.map((item) => {
        return parseFloat(item.daytemp)
    })
    data2.value = foreWeather.value.map((item) => {
        return parseFloat(item.nighttemp)
    })
    renderChart(data1, data2)

})

// 移除 onMounted 中的数据获取逻辑
// onMounted(async () => {

//     // 获取当前ip
//     const res = await getIp()

//     // 根据ip获取到的天气信息
//     const data = await getForecastWeather(res.adcode)

//     // const data = await getForecastWeather(props.adcode)   //传递参数来的天气信息
//     // console.log(data.forecasts[0].casts)


//     foreWeather.value = data.forecasts[0].casts

//     // 绘制折线图用到的数据
//     data1.value = foreWeather.value.map((item) => {
//         return parseFloat(item.daytemp)
//     })
//     data2.value = foreWeather.value.map((item) => {
//         return parseFloat(item.nighttemp)
//     })
//     renderChart(data1, data2)

// })

// 函数：根据日期字符串获取中文星期几


const getWeekday = (dateString) => {
    // 创建一个 Date 对象。使用 'T00:00:00' 有助于确保日期解析的跨环境一致性，
    // 通常会按照当地时间午夜来解析。
    const date = new Date(dateString + 'T00:00:00');
    const dayOfWeek = date.getDay(); // getDay() 返回 0（周日）到 6（周六）的数字
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    return weekdays[dayOfWeek];
};

// 函数：根据索引和天气项确定要显示的日期标签（今天、明天或星期几）
const getDisplayDayLabel = (item, index) => {
    if (index === 0) {
        return '今天';
    } else if (index === 1) {
        return '明天';
    } else {
        // 对于索引大于 1 的项，计算并返回星期几
        return getWeekday(item.date);
    }
};

const option = ref({})


const renderChart = (data1, data2) => {
    option.value = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            show: false,
        },
        yAxis: {
            type: 'value',
            show: false,
        },
        grid: {
            left: 100,
            right: 100,
            top: 50,
            bottom: 0
        },


        series: [
            {
                name: 'Highest',
                type: 'line',
                data: data1,
                smooth: true, // 是否平滑曲线
                // 自定义标签
                label: {
                    show: true,
                    position: 'top',
                    distance: 5,
                    color: '#ffffff',
                    formatter: (params) => {   //格式化标签内容
                        return `白${params.value}℃`
                    },
                    fontSize: 14
                }
            },
            {
                name: 'Lowest',
                type: 'line',
                data: data2,
                smooth: true,
                label: {
                    show: true,
                    position: 'top',
                    distance: 5,
                    color: '#ffffff',
                    formatter: (params) => {   //格式化标签内容
                        return `晚${params.value}℃`
                    },
                    fontSize: 14
                }
            }
        ]
    }
}





</script>
<style lang="scss" scoped>
.forecast {

    width: 960px;
    height: 390px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 40px 48px 0 48px;
    border-radius: 5px;
    color: #ffffff;
    background-color: #004e71;

    .forecastText {
        display: flex;
        justify-content: space-between;

        div {
            display: flex;
            gap: 20px;
            flex-direction: column;

            span {
                width: 200px;
                height: 24px;
                text-align: center;
            }
        }
    }

    .chart {
        margin-top: 20px;
        width: 864px;
        height: 160px;
    }
}
</style>